<template>
  <div class="house-list">
    <div class="container-1200">
      <FilterC
        v-if="isFilter"
        :areaId="areaId"
        :regionId="region_id"
        @select="filterSelect"
      />
      <List :listData="listData" isPagination @currentChange="currentChange" />
    </div>
    <FooterIco />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import FilterC from '@/components/FilterC'
import List from '@/components/List'
import FooterIco from '@/components/FooterIco'
import {
  getApiBaseHouseList,
  getApiCollectList,
  getApiHistoryList,
} from '@/api'
export default {
  components: {
    FilterC,
    List,
    FooterIco,
  },
  props: {
    cate_id: {
      type: String,
      default: null,
    },
    user_id: {
      type: String,
      default: null,
    },
    isFilter: {
      type: Boolean,
      default: true,
    },
    build_id: {
      type: String,
      default: null,
    },
    type: {
      type: String, //list attention browse
      required: true,
    },
    areaId: {
      type: String,
    },
    region_id: {
      type: String,
    },
    // cate_id: {
    //   type: String,
    // },
    // build_id: {
    //   type: String,
    // },
    // search_str: {
    //   type: String,
    // },
  },
  data() {
    return {
      filterParams: {
        cate: 0,
        feature: 0,
        indec: 0,
        region: 0,
      },
      page: 1,
      pageSize: 10,
      listData: {
        total: 0,
        list: [],
      },
    }
  },
  computed: {
    ...mapState(['searchVal']),
  },
  watch: {
    cate_id(newValue, oldValue) {
      if (newValue) {
        this.getHouseList()
      }
    },
    searchVal(newValue, oldValue) {
      console.log('newValue: ', newValue)
      if (newValue) {
        this.getHouseList()
      }
    },
  },
  created() {
    // if (this.areaId !== null) {
    //   this.region_id = this.areaId
    // }
    this.getHouseList()
  },
  methods: {
    filterSelect(option) {
      console.log('option: ', option);
      this.filterParams = option
      this.page = 1
      this.getHouseList()
    },
    currentChange(page) {
      this.page = page
      this.getHouseList()
    },
    getHouseList() {
      const params = {
        ...this.filterParams,
        page_number: this.page,
        page_size: this.pageSize,
      }
        console.log('params: ', params);
      const user_id = localStorage.getItem('id')
      if (user_id) params.user_id = user_id
      if (this.cate_id) params.cate_id = this.cate_id
      if (this.build_id) params.build_id = this.build_id
      if (this.searchVal) params.search_str = this.searchVal
      if (this.areaId) params.region_id = this.areaId
      if (this.region_id) params.region_dis_id = this.region_id
      // if (this.cate_id) params.region_dis_id = this.cate_id
      // if (this.build_id) params.region_dis_id = this.build_id

      const keys = Object.keys(params)
      keys.forEach((key) => {
        if (
          params[key] === null ||
          params[key] === '' ||
          params[key] === 0 ||
          params[key] === undefined
        ) {
          delete params[key]
        }
        if (key === 'feature_id' && params[key].length === 0) {
          delete params[key]
        }
      })
      switch (this.type) {
        case 'list':
          params.is_top = 2
          if (this.searchVal) {
            delete params['is_top']
          }
          getApiBaseHouseList(params).then((res) => {
            if (res.code === 200) {
              this.listData = {
                total: res.data.total_count,
                list: res.data.list,
              }
            } else {
              this.listData = {
                total: 0,
                list: [],
              }
            }
          })
          break
        case 'attention':
          getApiCollectList(params).then((res) => {
            if (res.code === 200) {
              this.listData = {
                total: res.data.length,
                list: res.data.list,
              }
            } else {
              this.listData = {
                total: 0,
                list: [],
              }
            }
          })
          break
        case 'browse':
          getApiHistoryList(params).then((res) => {
            if (res.code === 200) {
              this.listData = {
                total: res.data.length,
                list: res.data.list,
              }
            } else {
              this.listData = {
                total: 0,
                list: [],
              }
            }
          })
          break
      }
      // if (this.user_id) {
      //   getApiCollectList(params).then((res) => {
      //     if (res.code === 200) {
      //       this.listData = {
      //         total: res.data.length,
      //         list: res.data,
      //       }
      //     }
      //   })
      // } else {
      //   getApiBaseHouseList(params).then((res) => {
      //     if (res.code === 200) {
      //       this.listData = {
      //         total: res.data.length,
      //         list: res.data,
      //       }
      //     }
      //   })
      // }
    },
  },
}
</script>

<style lang="less" scoped>
.house-list {
  padding-top: 24px;
}
</style>